<template>
	<view>
		<view class="area">
			<view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
		</view>
	</view>
</template>
<script module="test" lang="wxs">
	var startX = 0
	var startY = 0

	var lastLeft = 0;
	var lastTop = 0;

	function touchstart(event, ins) {
		console.log("touchstart")
		var touch = event.touches[0] || event.changedTouches[0]
		startX = touch.pageX
		startY = touch.pageY

		lastLeft = touch.pageX - 50
		lastTop = touch.pageY - 50
		console.log(touch.pageX + "-------")


	}

	function touchmove(event, ins) {
		var touch = event.touches[0] || event.changedTouches[0]
		var pageX = touch.pageX
		var pageY = touch.pageY



		var left = pageX - startX + lastLeft
		var top = pageY - startY + lastTop
		startX = pageX
		startY = pageY
		lastLeft = left
		lastTop = top

		ins.selectComponent('.movable').setStyle({
			left: left + 'px',
			top: top + 'px'
		})
		return false
	}
	module.exports = {
		msg: 'Hello',
		touchstart: touchstart,
		touchmove: touchmove
	}
</script>

<script>
	export default {
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style>
	.area {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.movable {
		position: absolute;
		width: 100px;
		height: 100px;
		right: 50px;
		bottom: 50px;
		color: white;
		text-align: center;
		line-height: 100px;
		background-color: red;
		z-index: 1000;
	}
</style>